import type React from 'react'
import { useState } from 'react'
import styles from './styles/App.module.less'

const SimpleApp: React.FC = () => {
  const [currentTheme, setCurrentTheme] = useState<'pink' | 'blue' | 'purple'>('pink')

  const themeOptions = [
    { value: 'pink', label: '🌸 梦幻粉色' },
    { value: 'blue', label: '💎 梦幻蓝色' },
    { value: 'purple', label: '💜 梦幻紫色' },
  ]

  const handleThemeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const newTheme = event.target.value as 'pink' | 'blue' | 'purple'
    console.log('切换主题到:', newTheme)
    setCurrentTheme(newTheme)
  }

  const getThemeStyles = () => {
    switch (currentTheme) {
      case 'pink':
        return {
          background: 'linear-gradient(135deg, #FFF5F7 0%, #FFE4E1 50%, #FFF0F5 100%)',
          color: '#FF69B4',
          buttonBg: 'linear-gradient(135deg, #FF9ACD 0%, #FFB6C1 50%, #FFC0CB 100%)',
        }
      case 'blue':
        return {
          background: 'linear-gradient(135deg, #F0F8FF 0%, #E6F3FF 50%, #F5FAFF 100%)',
          color: '#4682B4',
          buttonBg: 'linear-gradient(135deg, #4682B4 0%, #87CEEB 50%, #B0E0E6 100%)',
        }
      case 'purple':
        return {
          background: 'linear-gradient(135deg, #F8F4FF 0%, #F3E5FF 50%, #FAF7FF 100%)',
          color: '#9370DB',
          buttonBg: 'linear-gradient(135deg, #9370DB 0%, #DDA0DD 50%, #E6E6FA 100%)',
        }
      default:
        return {
          background: 'linear-gradient(135deg, #FFF5F7 0%, #FFE4E1 50%, #FFF0F5 100%)',
          color: '#FF69B4',
          buttonBg: 'linear-gradient(135deg, #FF9ACD 0%, #FFB6C1 50%, #FFC0CB 100%)',
        }
    }
  }

  const themeStyles = getThemeStyles()

  return (
    <div
      className={styles.app}
      style={{ background: themeStyles.background, transition: 'all 0.3s ease' }}
    >
      <header className={styles.header}>
        <h1 style={{ color: themeStyles.color, transition: 'color 0.3s ease' }}>
          Nikki UI 主题切换测试
        </h1>
        <p style={{ color: themeStyles.color, transition: 'color 0.3s ease' }}>
          简化版主题切换测试
        </p>
        <div className={styles.themeSelector}>
          <span style={{ color: themeStyles.color }}>主题切换：</span>
          <select
            value={currentTheme}
            onChange={handleThemeChange}
            style={{
              padding: '8px 12px',
              borderRadius: '20px',
              border: `2px solid ${themeStyles.color}`,
              background: 'white',
              color: themeStyles.color,
              fontSize: '14px',
              cursor: 'pointer',
              marginLeft: '10px',
            }}
          >
            {themeOptions.map((option) => (
              <option key={option.value} value={option.value}>
                {option.label}
              </option>
            ))}
          </select>
          <div
            style={{
              marginLeft: '15px',
              fontSize: '12px',
              color: themeStyles.color,
              padding: '5px 10px',
              borderRadius: '10px',
              background: 'rgba(255, 255, 255, 0.8)',
            }}
          >
            当前: {currentTheme}
          </div>
        </div>
      </header>

      <main className={styles.main}>
        <div
          className={styles.demoCard}
          style={{
            background: 'rgba(255, 255, 255, 0.9)',
            boxShadow: `0 20px 60px ${themeStyles.color}33`,
            transition: 'all 0.3s ease',
          }}
        >
          <h2 style={{ color: themeStyles.color, transition: 'color 0.3s ease' }}>
            ✨ 主题切换测试
          </h2>
          <div className={styles.buttonGroup}>
            <button
              type="button"
              style={{
                padding: '12px 24px',
                border: 'none',
                borderRadius: '20px',
                background: themeStyles.buttonBg,
                color: 'white',
                fontWeight: '600',
                cursor: 'pointer',
                transition: 'all 0.3s ease',
                boxShadow: `0 4px 15px ${themeStyles.color}66`,
              }}
            >
              主题色按钮
            </button>
          </div>
          <div style={{ marginTop: '20px', fontSize: '14px', color: themeStyles.color }}>
            <p>当前主题：{currentTheme}</p>
            <p>主题颜色：{themeStyles.color}</p>
            <p>切换次数：{Math.floor(Math.random() * 10)}</p>
          </div>
        </div>
      </main>
    </div>
  )
}

export default SimpleApp
